<template>
  <div>
    <el-dialog
      :visible.sync="dialog.add"
      :close-on-click-modal="false"
      title="添加"
      width="80%"
      append-to-body
      @closed="dialogClosed('addForm')"
    >
      <el-form ref="addForm" :model="form" label-width="120px" :rules="validateRules">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="作业名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入作业名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="完整类名" prop="className">
              <el-select
                v-model="form.className"
                placeholder="请选择完整类名"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.jobClassessList"
                  :value="item"
                  :key="item"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="cron表达式" prop="cronExpression">
              <el-input v-model="form.cronExpression" placeholder="请输入cron表达式" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="作业组名称" prop="groupName">
              <el-input v-model="form.groupName" placeholder="请输入作业组名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="触发器名称" prop="triggerName">
              <el-input v-model="form.triggerName" placeholder="请输入触发器名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="触发器组" prop="triggerGroup">
              <el-input v-model="form.triggerGroup" placeholder="请输入触发器组" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="作业描述" prop="description">
              <el-input type="textarea" v-model="form.description" placeholder="请输入作业描述" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="作业状态" prop="jobStatus">
              <el-select
                v-model="form.jobStatus"
                placeholder="请选择作业状态"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.jobStatusSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="状态更新时间" prop="jobStatusTime">
              <el-date-picker
                type="datetime"
                v-model="form.jobStatusTime"
                placeholder="请输入状态更新时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%;"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="自动启动" prop="autoStart">
              <el-select
                v-model="form.autoStart"
                placeholder="请选择自动启动"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.autoStartSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialog.add = false">取消</el-button>
        <el-button type="primary" @click="add" :loading="loading.add">添加</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialog.edit"
      :close-on-click-modal="false"
      title="修改"
      width="80%"
      append-to-body
      @closed="dialogClosed('editForm')"
    >
      <el-form ref="editForm" :model="form" label-width="120px" :rules="validateRules">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="作业名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入作业名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="完整类名" prop="className">
              <el-select
                v-model="form.className"
                placeholder="请选择完整类名"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.jobClassessList"
                  :value="item"
                  :key="item"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="cron表达式" prop="cronExpression">
              <el-input v-model="form.cronExpression" placeholder="请输入cron表达式" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="作业组名称" prop="groupName">
              <el-input v-model="form.groupName" placeholder="请输入作业组名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="触发器名称" prop="triggerName">
              <el-input v-model="form.triggerName" placeholder="请输入触发器名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="触发器组" prop="triggerGroup">
              <el-input v-model="form.triggerGroup" placeholder="请输入触发器组" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="作业描述" prop="description">
              <el-input type="textarea" v-model="form.description" placeholder="请输入作业描述" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="作业状态" prop="jobStatus">
              <el-select
                v-model="form.jobStatus"
                placeholder="请选择作业状态"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.jobStatusSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="状态更新时间" prop="jobStatusTime">
              <el-date-picker
                type="datetime"
                v-model="form.jobStatusTime"
                placeholder="请输入状态更新时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%;"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="自动启动" prop="autoStart">
              <el-select
                v-model="form.autoStart"
                placeholder="请选择自动启动"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.autoStartSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="dialog.edit = false">取消</el-button>
        <el-button type="primary" @click="edit" :loading="loading.edit">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as utils from '@/utils/utils'
import * as ResponseStatus from '@/utils/response-status'
import UploadImage from '@/components/Upload/UploadImage'
import Tinymce from '@/components/Tinymce'
const resUrl = process.env.VUE_APP_RES_URL
export default {
  name: 'SchedulerAddEdit',
  components: {
    UploadImage,
    Tinymce,
  },
  data() {
    return {
      dialog: {
        add: false,
        edit: false,
      },
      loading: {
        add: false,
        edit: false,
      },
      form: {
        name: undefined,
        className: undefined,
        cronExpression: undefined,
        groupName: undefined,
        triggerName: undefined,
        triggerGroup: undefined,
        description: undefined,
        jobStatus: undefined,
        jobStatusTime: undefined,
        autoStart: undefined,
      },
      validateRules: {
        name: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 50,
            message: '必须1-50个字符',
            trigger: 'blur',
          },
        ],
        className: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 200,
            message: '必须1-200个字符',
            trigger: 'blur',
          },
        ],
        cronExpression: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 50,
            message: '必须1-50个字符',
            trigger: 'blur',
          },
        ],
        groupName: [
          {
            type: 'string',
            min: 1,
            max: 50,
            message: '必须1-50个字符',
            trigger: 'blur',
          },
        ],
        triggerName: [
          {
            type: 'string',
            min: 1,
            max: 50,
            message: '必须1-50个字符',
            trigger: 'blur',
          },
        ],
        triggerGroup: [
          {
            type: 'string',
            min: 1,
            max: 50,
            message: '必须1-50个字符',
            trigger: 'blur',
          },
        ],
        description: [
          {
            type: 'string',
            min: 1,
            max: 500,
            message: '必须1-500个字符',
            trigger: 'blur',
          },
        ],
      },
      dataDictCodes: ['JOB_STATUS', 'YES_NO'],
      selects: {
        jobStatusSelect: [],
        autoStartSelect: [],
        jobClassessList: [],
      },
      oldCronExp: null,
      newCronExp: null,
      currentJobStatus: null,
      resUrl: resUrl,
    }
  },
  computed: {},
  mounted() {
    this.initDataDict()
    this.getJobClassess()
  },
  methods: {
    initDataDict() {
      utils
        .getDataDict(this.dataDictCodes)
        .then((response) => {
          if (response) {
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'JOB_STATUS',
              formProp: 'jobStatus',
              dataProp: 'jobStatusSelect',
            })
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'YES_NO',
              formProp: 'autoStart',
              dataProp: 'autoStartSelect',
            })
          }
        })
        .catch((error) => {})
    },
    dialogClosed(formRef) {
      this.$refs[formRef].resetFields()
      for (let key in this.form) {
        this.form[key] = undefined
      }
    },
    add() {
      this.$emit('add')
    },
    edit() {
      // 记录新修改的cron表达式
      this.newCronExp = this.form.cronExpression
      this.$emit('edit')
    },
    /** 触发父组件展示关联表数据的搜索对话框 */
    showJoinSearch(options) {
      this.$emit('showJoinSearchDialog', options)
    },
    imgUploadSuccess(formProp, url) {
      this.form[formProp] = url
    },
    imgRemoveSuccess(formProp) {
      this.form[formProp] = undefined
    },
    getJobClassess() {
      utils.doGet('/scheduler/admin/job-classes', {}).then((res) => {
        const data = res
        if (data.data.total <= 0) {
          this.$message.error('未获取到类名称')
          return
        }
        this.selects.jobClassessList = data.data.rows
      })
    },
  },
}
</script>

<style>
</style>